import { useEffect } from "react";
import type { LoaderFunctionArgs } from "react-router";
import { getWifiDevices } from "~/lib/server";
import type { Route } from "./+types/wifi";



interface wifiDevice {
    sn: string;
}

export async function clientLoader({ params }: LoaderFunctionArgs) {
    const devices = await getWifiDevices();


    return { devices };

}



export default function Wifi({ loaderData }: Route.ComponentProps) {


    const { devices } = loaderData

    return (
        <>

            <h2 className="my-2 text-3xl">wifi 设备</h2>

            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" >

                {devices.map((item) => (
                    <DeviceCard {...item} key={item.sn} />
                ))}

            </div>


        </>
    );
}



function DeviceCard({ sn }: wifiDevice) {



    return (
        <>


            <div className="bg-white shadow-md rounded px-4 py-2 hover:bg-gray-100"
            >

                <h3 className="font-bold text-xl mb-2">{sn}</h3>
            </div >

        </>

    );
}

